import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import * as Actions from '../../actions/order'
import Header from '../../components/Header'
import { Checkbox } from 'antd-mobile';
//订单状态(10:待支付 20:待发货 30:待收货 40:退货中 50:退款中 60:纠纷中 80:已关闭 90:完成)
class OrderFilter extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
    this.state = {
      
    }
  }
  componentDidMount(){
    
  }
  changeOrderStatus(index){
    let {actions} =this.props 
    actions.setOrderStatus(index)
    
  }

  

  render(){
    let {orderStatus} =this.props
    return(
        <div >
        <Header title={'Screening order'} leftBtn={true} leftBtnTouch={()=>{
          this.context.router.history.goBack()
        }}/>
         <div className='order-filter-content common-container'>
              <div className='item'>
                <h3 className='orderTypeHeading'>{orderStatus.title}</h3>
                <div className='filterTypeSection'>
                  {
                    orderStatus.children.map((item,i) =>{
                      return(
                        <div className={`${orderStatus.selectedIndex == i ? 'active filter-li':"filter-li"}`} key={i}>
                        <Checkbox className='checkbox' checked={orderStatus.selectedIndex == i} onChange={()=>{
                          this.changeOrderStatus(i)
                        }}/>
                        {item.text}
                        </div>
                        )
                    })
                  }
                </div>
              </div>
              
              <div className='apply-btn btn' onClick={()=>{
                this.context.router.history.goBack()
              }}>Apply</div>
         
         </div>
        </div>
    )
  }
 
}
function mapStateToProps(state){
  return{ 
   orderStatus:state.orderStatus.toJS()
  }
}
function mapDispatchToProps(dispatch){
  return{
    actions:bindActionCreators(Actions,dispatch)
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(OrderFilter)


